const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const devConfig = require("./config/webpack.config.dev.cjs")
const prodConfig = require("./config/webpack.config.prod.cjs")
const { merge } = require("webpack-merge")

module.exports = merge((process.env.NODE_ENV == "production" ? prodConfig : devConfig), {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [{
      test: /\.(png|jpeg|jpg|gif|bmp)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: "assets/images/[name].[hash:8].[ext]"
        }
      }]
    }, {
      test: /.css$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }]
    }, {
      test: /.less$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "less-loader"
      }]
    }, {
      // 匹配 .ts / .tsx 类型的文件，以及vue中的ts代码
      test: /\.tsx?$/,
      use: {
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      exclude: "/node-modules/"
    }, {
      test: /\.vue$/,
      use: [{
        loader: 'vue-loader'
      }]
    }],
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename:'index.html',
      title: 'webpack5-vue3-ts-demo'
    }),
    new VueLoaderPlugin(),
    new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, 'public'),
        to: path.resolve(__dirname, 'dist')
      }],
    }),
  ],
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".vue"],
    alias: {
      "@": path.resolve(__dirname, "src"),
    }
  },
  performance: {
    hints: false
  }
})